// mixin
// 清除浮动
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin beforeTopImage($url: '') {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 0.42rem;
  left: 0;
  top: -0.2rem;
  background-image: url($url);
  background-position: 0 0 ;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

// 单行文字不换行缩写
@mixin ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 加载css背景图片
@mixin bg( $bg: '', $size: 100% 100%, $position:0 0, $repeat: no-repeat){
  background-image: url($bg);
  background-size: $size;
  background-position: $position;
  background-repeat: $repeat;
}

// 加载css雪碧图
@mixin sprite( $bg: '', $size: 100% 100%, $position:0 0) {
  background-image: url($bg);
  background-size: $size;
  background-position: $position;
  background-repeat: no-repeat;
}

// 多行隐藏
@mixin textoverflow($clamp:1) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $clamp;
  /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}

//flex box
@mixin flexbox($jc:space-between, $ai:center, $fd:row, $fw:nowrap) {
  display: flex;
  flex: 1;
  justify-content: $jc;
  align-items: $ai;
  flex-direction: $fd;
  flex-wrap: $fw;
}

// 1px
@mixin border-1px-all($color, $borderRadius: 4px) {
    position: relative;
    &:after {
        content: '';
        position: absolute;
        box-sizing: border-box;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        border: 1px solid $color;
        border-radius: $borderRadius;
        transform: scale(0.5);
        transform-origin: top left;
    }
}

@mixin border-1px($position, $color) {
    position: relative;
    &:before {
        content: "";
        position: absolute;
        #{$position}: 0;
        left: 0;
        right: 0;
        border-bottom: 1px solid $color;
        transform: scaleY(.5);
        transform-origin: left top;
    }
}

@mixin hiddenScrollbar() {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    &::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }
}

@mixin ellipsis() {
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}
